<template>
  <div class="title-remark">
    
      <div class="qtitle" @click="dialogFormVisible = true" style="margin-top: 20px">{{showTitle()}}</div>
      <div class="remarks" @click="dialogFormVisible = true" style="font-size: 15px; margin-top: 10px">{{showRemarks()}}</div>
      <el-dialog title="填写标题或备注" v-model="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off" placeholder="标题"></el-input>
          </el-form-item>
          <el-form-item label="备注说明" :label-width="formLabelWidth">
            <el-input v-model="form.remarks" autocomplete="off" placeholder="备注说明"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <!-- <span class="dialog-footer"> -->
            <el-button @click="dialogFormVisible = false" style="float: none">取 消</el-button>
            <el-button type="primary" @click="finish" style="float: none">保 存</el-button>
          <!-- </span> -->
        </template>
      </el-dialog>
  </div>
</template>

<script>
export default {
  name:'QuestionnaireTitle',
  data(){
   return {
      // title: '',
      // remarks: '',
      dialogFormVisible: false,
      form: {
        title: this.title,
        remarks: this.remarks,
      },
      formLabelWidth: '120px',
      first: true,
   }
  },
  props: {
      title: {
        type: String,
        default: '',
      },
      remarks: {
        type: String,
        default: ''
      }
  },
  emits: ['changeTitle'],

  
  methods: {
    finish() {
      // this.title = this.form.title
      // this.remarks = this.form.remarks
      this.dialogFormVisible = false
      this.$emit('changeTitle', {title: this.form.title, description: this.form.remarks})
    },

    showTitle() {
      this.form.title = this.title
      this.form.remarks = this.remarks
      if(this.title == '' || this.title == null){
        return '请填写你的问卷标题'
      }else{
        return this.title
      }
    },

    showRemarks() {
      if(this.remarks == '' || this.remarks == null){
        return '添加备注说明'
      }else{
        return this.remarks
      }
    }
  }
}
</script>

<style src='assets/css/editcss/questionnaireTitle.css'>
  /* @import url('./css/questionnaireTitle.css'); */
</style>
